{include file="common/header"/}
<style type="text/css">
    .layui-table-cell {
        overflow: visible;
        height: auto;
        vertical-align: middle; /* 单元格内容垂直居中 */
    }
    .son {
        height: 20px;
    }
    .child-row { /* 子行样式 */
        background: #f8f8f8;
    }
</style>
<div class="lemo-container">
    <div class="lemo-main">
        <div class="admin-main layui-anim layui-anim-upbit">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>产品列表</legend>
                <blockquote class="layui-elem-quote">
                    <div class="layui-inline">
                        <input type="text" id='keys' name="keys" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
                    </div>
                    <a href="javascript:;" class="layui-btn data-add-btn layui-btn-sm" id="search">搜索</a>
                    <a data-href='{:url("addProduct")}' href="javascript:;" class="layui-btn layui-btn-sm layui-btn-warm add">添加</a>
                </blockquote>
            </fieldset>
            <table class="layui-table" id="list" lay-filter="list"></table>
        </div>
    </div>
</div>

<script type="text/html" id="action">
    <a data-href="{:url('addSku')}?id={{d.id}}" class="layui-btn layui-btn-xs" lay-event="edit">添加 sku</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="{:url('productDel')}" lay-event="del">删除</a>
</script>

<script type="text/html" id="imgurl">
    <img class="layui-upload-img" src="{{d.avatar}}" width="80px" height="80px">
</script>

{include file="common/footer"/}
<script>
    layui.use(['form', 'table', 'jquery'], function () {
        var table = layui.table,
            $ = layui.jquery;

        table.render({
            elem: '#list',
            url: '{:url("productList")}',
            method: 'post',
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '商品名称', width: 120},
                {field: 'shop_no', title: '店管家号', width: 120},
                {field: 'avatar', title: '图片', width: 100, toolbar: '#imgurl'},
                {field: 'material', title: '材质', width: 120},
                {field: 'manufacturer', title: '厂家', width: 120},
                {field: 'create_time', title: '创建时间', width: 220},
                {title: '数量', width: 100},  
                {title: '单位', width: 100},  
                {title: '价格', width: 100},  
                {title: '操作', width: 120, toolbar: '#action', align: "center"}
            ]],
            page: true,
            limit: 15,
            done: function(res) {  
                var $tbody = $(this.elem).next('.layui-table-view').find('.layui-table-body tbody');
                var data = res.data;  

                // 清空原有行（Layui默认会渲染所有字段，需手动覆盖）
                $tbody.empty();

                // 遍历主数据，插入主行+子行
                data.forEach((mainRow, mainIndex) => {
                    // 计算主行需要合并的行数（sku数量 + 主行自己）
                    var rowSpan = mainRow.sku.length > 0 ? mainRow.sku.length : 1;

                    // 插入主行（前7列合并rowspan）
                    var batchTd = mainRow.sku.length > 0? `<td  data-field="id" data-key="1-0-7" class="">
                                <div class=" laytable-cell-1-0-7 son">2</div>
                            </td>
                            <td  data-field="id" data-key="1-0-8" class="">
                                <div class=" laytable-cell-1-0-8 son">2</div>
                            </td>
                            <td data-field="id" data-key="1-0-9" class="">
                                <div class=" laytable-cell-1-0-9 son">2</div>
                            </td>
                            `: `<td colspan="3">
                                没有内容
                            </td>`;

                    var mainTr = `
                        <tr data-index="${mainIndex}">

                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-0" class="">
                                <div class="layui-table-cell laytable-cell-1-0-0">${mainRow.id}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-1" class="">
                                <div class="layui-table-cell laytable-cell-1-0-1">${mainRow.name}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-2" class="">
                                <div class="layui-table-cell laytable-cell-1-0-2">${mainRow.shop_no}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-3" class="">
                                <div class="layui-table-cell laytable-cell-1-0-3"><img src="${mainRow.avatar}" width="80px"></div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-4" class="">
                                <div class="layui-table-cell laytable-cell-1-0-4">${mainRow.material}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-5" class="">
                                <div class="layui-table-cell laytable-cell-1-0-5">${mainRow.manufacturer}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-6" class="">
                                <div class="layui-table-cell laytable-cell-1-0-6">${mainRow.create_time}</div>
                            </td>

                            ${batchTd}


                            <td rowspan="${rowSpan}" data-field="6" data-key="1-0-10" align="center" data-off="true" class="layui-table-col-special">
                                <div class="layui-table-cell laytable-cell-1-0-10"> 
                                    <a data-href="/admin/maichen.Operation/groupEdit.html?id=16" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 
                                    <a data-href="/admin/maichen.Operation/groupDel.html" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 
                                </div>
                            </td>
                        </tr>
                    `;
                    $tbody.append(mainTr);

                    // 插入子行（从第二个sku开始）
                    if (mainRow.sku.length > 1) {
                        mainRow.sku.slice(1).forEach((childRow) => {
                            var childTr = `
                                <tr class="child-row">
                                    <td>${childRow.num}</td>
                                    <td>${childRow.unit}</td>
                                    <td>${childRow.price}</td>
                                </tr>
                            `;
                            $tbody.append(childTr);
                        });
                    }
                });
            }
        });

        // 搜索逻辑
        $('#search').click(function() {
            table.reload('list', {
                page: { curr: 1 },
                where: { keys: $('#keys').val() }
            });
        });
    });
</script>